<template>
	<!-- 使用 page-meta 组件配合阻止滚动穿透 ,page-meta一定作为页面的第一个节点-->
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<!-- 输入昵称的弹窗 -->
	<view>
		<uni-popup ref="inputDialog" type="bottom" @change="change" :safeArea="false">
			<view class="popup-content">
				<view class="title-row">添加冰箱</view>
				<view class="obj-msg-row">
					<image :src="selected_item.imgSrc" style="height: 300rpx; width: 300rpx;" mode="heightFix">
					</image>
					<view class="msg">
						<image :src="brandIcon" style="width: 180rpx; height: 70rpx;" mode="widthFix"></image>
						<text>品牌：{{brandName}}</text>
						<text style="font-size: 10px; color: #abb2bb;">型号：{{selected_item.name}}</text>
					</view>
				</view>
				<view class="input-view"><text style="font-weight: 450;">冰箱昵称：</text>
					<uni-easyinput v-model="nickname" placeholder="请输入内容">
					</uni-easyinput>
				</view>
				<button type="default" @click="addConfirm">添加</button>
			</view>
		</uni-popup>
	</view>

	<view class="search-box" style="background-color: #fff;">
		<!-- 使用 uni-ui 提供的搜索组件 -->
		<!-- :focus自动获取焦点 -->
		<uni-search-bar :radius="100" bgColor="#f2f3f5" :value="kw" @input="input"></uni-search-bar>
	</view>

	<view class="model-list-view">
		<image src="../../../static/empty_img/search_empty.png" style="width: 100%;margin-top: 30%;" mode="widthFix"
			v-if="list.length==0&&kw!=''">
		</image>
		<view class="model-item" v-for="(item, index) in list" :index="index" :key="item.mid" @click="selectItem(item)"
			v-else>
			<image :src="item.imgSrc" style="height: 300rpx; width: 300rpx;" mode="heightFix">
			</image>
			<text class="text-brand">{{brandName}}</text>
			<text class="text-model">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bid: -1,
				brandName: '',
				brandIcon: '',
				model_list: [],
				// 选中的冰箱
				selected_item: {},
				show: false,
				// 昵称
				nickname: '',
				search: false,
				kw: '',
				search_result_list: []
			};
		},

		computed: {
			list() {
				if (this.search_result_list.length == 0 && this.kw == '') {
					return this.model_list
				} else return this.search_result_list
			}
		},

		onLoad(options) {
			this.bid = options.bid
			this.brandName = options.name
			this.brandIcon = options.img
			this.search = Boolean(options.search)
			this.load()
		},

		onPullDownRefresh(options) {
			this.load()
			uni.stopPullDownRefresh()
		},

		methods: {
			async load() {
				this.model_list = await uni.$api.brand.getAllModel(this.bid) || []
				uni.showLoading({
					title: '加载中...',
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			},

			// 跳转

			// 请求
			addConfirm() {
				if (!this.nickname)
					return uni.$showMsg('昵称不可为空')
				const fridge = {
					bid: this.bid,
					mid: this.selected_item.mid,
					name: this.nickname,
				}
				uni.$api.fridge.save(fridge)
				this.$refs.inputDialog.close()
				uni.navigateBack({
					delta: this.search ? 3 : 2
				})
			},

			// 事件处理
			// 输入昵称的弹窗
			selectItem(obj) {
				this.selected_item = obj
				this.$refs.inputDialog.open()
			},
			change(e) {
				this.show = e.show
			},

			// 搜索输入框监听
			input(e) {
				// 清除 timer 对应的延时器
				clearTimeout(this.timer)
				// 重新启动一个延时器，并把 timerId 赋值给 this.timer
				this.timer = setTimeout(() => {
					// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
					this.kw = e
					// 根据关键词，查询搜索建议列表
					this.getSearchList()
				}, 500)
			},
			// 根据搜索关键词，搜索建议列表
			getSearchList() {
				// 判断关键词是否为空
				if (this.kw === '') {
					this.search_result_list = []
					return
				}
				// 筛选列表，获取搜索建议列表
				// TODO

				this.search_result_list = this.model_list.filter(x => x.name.indexOf(this.kw) !== -1)
				if (this.search_result_list.length === 0) {
					return uni.$showMsg('无匹配结果')
				}
			},
		}
	}
</script>

<style lang="scss">
	.popup-content {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		align-items: center;
		padding: 10px;
		padding-bottom: 20px;

		.title-row {
			font-size: 45rpx;
		}

		.obj-msg-row {
			display: flex;
			width: 80%;
			justify-content: space-between;
			font-size: 16px;
			padding: 10px 0;

			.msg {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
		}

		.input-view {
			display: flex;
			width: 80%;
			font-size: 16px;
			align-items: center;
		}

		>button {
			padding: 0 60rpx;
			margin-top: 20rpx;
			background-color: #94bfff;
			color: #fff;
			font-size: 20px;
			line-height: 2;
		}
	}

	.model-list-view {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-left: 35rpx;
		padding-right: 35rpx;

		.model-item {
			margin-top: 20rpx;
			padding: 10rpx 0;
			background-color: #fff;
			width: 47%;
			height: 400rpx;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			align-items: center;
			justify-content: space-around;

			.text-model {
				font-size: 10px;
			}
		}
	}
</style>
